import React,{Component} from 'react'

import {Switch, Route,Link,Redirect} from 'react-router-dom';

import Home from './home'

import { Layout, Menu, Icon, Input,Dropdown,Avatar } from 'antd';

import Logo from '../image/logo.png'

import * as config from '../../config/config'

import Add from '../newadd'

import step01 from '../newadd/addstep1'

import Category from '../category'

import Newbuild from '../category/newbuild'

import { connect } from 'react-redux'

import {withRouter} from 'react-router-dom'

import { bindActionCreators } from 'redux';

import * as ItemsActions from '../../actions/user';

import './home.styl'

import '../../common/common.styl'

const { Header, Sider, Content } = Layout;

const { SubMenu } = Menu;

const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">3rd menu item</a>
    </Menu.Item>
  </Menu>
);
@connect(
  state => state.inforesult,
  dispatch => ({
      actions: bindActionCreators(ItemsActions, dispatch)
 })
)
@withRouter
class Tabhead extends Component{
  constructor(props){
    super(props)
    this.state={
        paneArr:this.props.panes
    }
  }
  deleteChild(e,key){
    e.nativeEvent.stopImmediatePropagation();
    let dataArr=this.state.paneArr
    dataArr.splice(key,1)
    this.setState({
      paneArr:dataArr,
    })
    this.props.changearr(dataArr)
  }
  changeUrl(key,path){
    this.props.history.push(path)
    this.props.actions.menu(key)
  }
  render(){
    return(
      this.state.paneArr.map((item,key)=>(
          <div className={item.key===this.props.selet?'tab-li active':'tab-li'} key={key} onClick={(id,path)=>this.changeUrl(item.key,item.path)}>
            {item.title}
            <Icon type="close"  onClick={(e,id)=>this.deleteChild(e,key)}/>
          </div>
      ), this)
    )
  }
}

@connect(
  state => state.inforesult,
  dispatch => ({
      actions: bindActionCreators(ItemsActions, dispatch)
 })
)
class SiderDemo extends Component {
  constructor(props){
    super(props);
    this.state = {
      collapsed: false,
      currentKeys:'1',
      currentnum:"ho",
      panes:[]

      };
      
  }

      toggle = () => {
      this.setState({
          collapsed: !this.state.collapsed,
      });
      }
      
      //tab删除
      deletetab(arr){
        this.setState({
          panes:arr
        })
      }
      menclick(titel,key,path){
        let arr=this.state.panes
        let arr1=[]
        arr.map((item)=>(
          arr1.push(item.title)  
        )       
        )
        this.setState({
          currentnum:key,
        })
        this.props.actions.menu(key)
        if(arr1.indexOf(titel)!==-1) return
        let object={};
        object.title=titel;
        object.key=key;
        object.path=path;
        arr.push(object)
        this.setState({
          panes:arr,
        })
      }
    render(){
        return(
          <Layout className='m-layout'>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
            className="silder-left"
          >
            <div className="logo">
              <div className='img-logo'>
              <img src={Logo} alt="logo"/>
              </div>
              <Input  className='head-input'/>
            </div>
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['ho']} selectedKeys={[this.props.selet]}>
              {config.menuList.map((d,i)=>{
                  if(d.second.length>0){
                    return (
                    <SubMenu key={d.key} title={<span><Icon type={d.icon} />{d.name}</span>}>
                      {
                        d.second.map((item,j)=>(
                          <Menu.Item key={item.key} onClick={(title,key,path)=>this.menclick(item.name,item.key,item.path)}>
                          <Link to={item.path}>
                          {item.name}</Link></Menu.Item>
                          
                        ))
                      } 
                    </SubMenu> 
                    )
                   
                  }else{
                   return (
                      <Menu.Item key={d.key} onClick={(title,key,path)=>this.menclick(d.name,d.key,d.path)}>
                        <Icon type="video-camera" />
                        <span>{d.name}</span>
                        <Link to={d.path}></Link>
                      </Menu.Item>
                    )
                  }
   
                })}
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }} className="top-header" >
            <div className="head-top">
              <div className="head-left">
                  <Icon
                    className="trigger"
                    type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggle}
                  />
                  <span>一宅PMS管理系统</span>
                </div>
                <div className="head-right">
                  <div className="noti refresh">
                    <span></span>
                  </div>
                  <div className="noti remind">
                    <span></span>
                  </div>
                  <div className="portrait">
                    <Avatar></Avatar>
                  </div>
                  <Dropdown overlay={menu}>
                    <a className="ant-dropdown-link" href="#">
                      Hover me <Icon type="down" />
                    </a>
                  </Dropdown>
                </div>
              </div>
              <div className='tab-con'>
                <div className="tab-left">
                  <div className="left">
                      <Icon type="double-left" />
                  </div>
                  <div className="tab-home">
                      <Icon type="home" />
                  </div>
                  <Tabhead panes={this.state.panes} changearr={(arr)=>this.deletetab.bind(this,this.state.panes)} currentnum={this.state.currentnum}></Tabhead>
                </div>
                <div className="tab-right">
                  <div className="left">
                      <Icon type="double-right" />
                  </div>
                  <Dropdown overlay={menu}>
                    <a className="ant-dropdown-link" href="#">
                      <Icon type="down" />
                    </a>
                  </Dropdown>
                </div>
              </div>
            </Header>
            <Content style={{ margin: '24px 0px', padding:'0px 10px', background: '#fff', minHeight: 280 }}>
              <Switch>
                <Route path="/home" exact component={Home}></Route>
                <Route path="/addstep01" component={step01}></Route>
                <Route path="/addstep02" component={Add}></Route>
                <Route path="/category" component={Category}></Route>
                <Route path="/newbuild" component={Newbuild}></Route>
                <Redirect path="/" exact to={{pathname: '/home'}} />
              </Switch>
            </Content>
            {/* <Footer style={{ textAlign: 'center' }}>
                <div className="footer">
                  <span>帮助</span>
                  <span>隐私</span>
                  <span>条款</span>
                </div>
                <div className="">
                Copyright @ 2018 南京一宅体验技术部出品
                </div>
           </Footer> */}
          </Layout>
    </Layout>
        )
    }
}
export default SiderDemo